<!-- <script setup lang="ts">

</script>

<template>
<h1>Deployment视图</h1>
</template>

<style scoped>

</style> -->

<template>
  <!-- 仅当命名空间列表加载完毕后才渲染 Deployment 组件 -->
  <Deployment v-if="namespaces.length > 0" :namespaces="namespaces" :cluster-id="props.clusterId"/>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import Deployment from "@/components/cluster/Deployment.vue";
import { GetClusterInfo } from "@/api/cluster";

const props = defineProps({
  clusterId: {
    type: String,
    required: true
  },
})

// Namespace state
const namespaces = ref<{ label: string, value: string }[]>([]);

const fetchNamespaces = async () => {
  console.log(`Fetching namespaces for cluster: ${props.clusterId}`);
  // 解构赋值，直接拿到里面的data属性
  let { data } = await GetClusterInfo(props.clusterId);
  namespaces.value = data.namespaces.map((x) => {
    return { label: x.name, value: x.name };
  });
};

onMounted(() => {
  fetchNamespaces();
});

</script>

<style scoped>

</style>
